<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>:: CodeThatXPBar - navigation control that provides with the same look, feel and functionality as the special control bar which can be found in Windows Explorer, Control panel and other system tools of the WindowsXP ::</title>
<meta http-equiv="content-language" content=en>
<meta name=robots content="INDEX, FOLLOW">
<meta http-equiv=keywords content="CodeThatXPBar, script, bar, XP bar, javascript, javascript XP bar, free, free javascript XP bar, cross-browser, html, xml, css, control panel, Windows XP, explorer">
<meta http-equiv=description content="CodeThatXPBar is a navigation control that provides with the same look, feel and functionality as the special control bar which can be found in Windows Explorer, Control panel and other system tools of the WindowsXP">
<meta http-equiv=expires content="Mon, 01 Jan 1990 00:00:00 GMT">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv=pragma content="no-cache">
<meta name="revisit-after" content="1 day">
<meta http-equiv="content-script-type" content="text/javascript">
<link rel=stylesheet type="text/css" href="s.css">

<script language=javascript src="own.js"></script></head>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 bgcolor=#FFFFFF>
<table width=768 border=0 cellpadding=0 cellspacing=0>
<tr>
<td><div style="position:absolute;left:320;top:154;z-index:1"><img src="img/mm.gif" width=2 height=10></div><img src="img/s.gif" width=1 height=2></td>
</tr><tr>
<td class=ct13><table width=768 height=42 border=0 cellpadding=0 cellspacing=0>
	<tr>
	<td><img src="img/s.gif" width=20 height=1></td>
	<td valign=middle><p class=cp18><nobr><font class=ca8>User Manual <br><a href="../index.html" class="ca9"><font class="cf6">S</font>amples</a></font></nobr></p></td>
	<td width=13%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle><p class=cp18><nobr><a class=ca9 href="index.html"><font class=cf6>In</font>troduction</a>&nbsp; &nbsp;
	<a class=ca9 href="bar_style.html"><font class=cf6>S</font>tyle customize</a>&nbsp; &nbsp;
	<a class=ca9 href="bar_pos.html"><font class=cf6>B</font>ar position</a>&nbsp; &nbsp;
	<a class=ca9 href="bar_act.html"><font class=cf6>It</font>ems' actions</a></nobr></p>
	<p class=cp18><nobr><a class=ca9 href="bar_html.html"><font class=cf6>H</font>TML code as items' text</a>&nbsp; &nbsp;
	
	<a class=ca9 href="bar_db.html"><font class=cf6>X</font>PBar from the database</a></nobr></p>
	
	<p class=cp18><nobr><a class=ca9 href="bar_beh.html"><font class=cf6>C</font>hange XPBar Behaviour</a>&nbsp; &nbsp;
	<a class=ca9 href="standard_vs_pro.html?h=xpbar#xpbar"><font class=cf6>S</font>tandard vs PRO</a></nobr></p></td>
	<td width=23%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle><p class=cp18><nobr><font class=ca8>On-line Builder</font></nobr></p></td>
	<td width=13%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle>
	
	<p class=cp18><a class=ca9 href="http://codethat.com/xpbar/ctxpbarpro_builder.html">PRO</a></p>

	
	<p class=cp18><a class=ca9 href="../Builder/ctxpbarstd_builder.html">STD</a></p>
	
	</td>
	<td width=23%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle><p class=cp18><nobr><a class=ca8 href="userguide.html"><font class=cf7>1</font>23Guide</a>&nbsp; &nbsp;

	
	<p class=cp18><nobr><a class=ca8 href="http://codethat.com/sales.html"><font class=cf7>O</font>rder PRO Now</a>&nbsp; &nbsp;

	
	<a class=ca8 href="faq.html"><font class=cf7>F</font>AQ</a></nobr></p></td>
	<td width=28%><img src="img/s.gif" width=1 height=1></td>
	</tr>
</table></td>
</tr><tr>
<td><img src="img/s.gif" width=1 height=2></td>
</tr>
<tr>
<td class=ct12><table width=768 height=30 border=0 cellpadding=0 cellspacing=0>
	<tr><td valign=middle><h1 class=cp9>CODETHATXPBAR USER MANUAL</h1></td></tr>
</table></td>
</tr><tr>
<td>

<h1 class=cp10><font class=cf5>Style Customize</font></h1>
<p class=cp10>CodeThatXPBar allows you to customize style for whole submenus and individual items. Different styles can be assigned to ordinary items and for items that are under mouse cursor.</p>
<p class=cp10>Style specified in the topmost bar describes the default style for the whole bar and all bar's items.</p>
<p class=cp10>When the style attribute is specified in the item's description or submenu description, it overrides the style of the parent.</p>
<p class=cp10>To specify style for a bar and bar's items, use the "style" property, as is shown at folowing construction:</p>

<pre class=cc1>
<font class=cc6>"style"</font>	 <font class=cc2>:</font> <font class=cc7>{</font>
	<font class=cc6>"css"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
	<font class=cc6>"size"</font> <font class=cc3><font class=cc2>:</font> <font class=cc8>[</font>width<font class=cc2>,</font> height<font class=cc8>]</font><font class=cc2>,</font></font>
	<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
	<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
	<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
	<font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
	<font class=cc6>"shadow"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"color"</font><font class=cc2>,</font> <font class=cc6>"width"</font>
	<font class=cc7>}</font>
	<font class=cc6>"border"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"color"</font><font class=cc2>,</font> <font class=cc6>"width"</font>
	<font class=cc7>}</font>
	<font class=cc6>"imgitem"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
	<font class=cc6>"imgdir"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
	<font class=cc6>"imgdiropen"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
	<font class=cc6>"imgendon"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
	<font class=cc6>"imgendoff"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
	<font class=cc6>"z"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
	<font class=cc6>"opacity"</font> <font class=cc2>:</font>
<font class=cc7>}</font>
</pre>

<p class=cp10>where</p>

<pre class=cc1>
<font class=cc3>css	 <font class=cc2>:</font> string				 <font class=cc2>:</font> CSS class
size	 <font class=cc2>:</font> <font class=cc8>[</font>width<font class=cc2>,</font> height<font class=cc8>]</font>		 <font class=cc2>:</font> item width<font class=cc2>/</font>height
align	 <font class=cc2>:</font> string				 <font class=cc2>:</font> text alignment <font class=cc2>(</font>left<font class=cc2>/</font>right<font class=cc2>/</font>center<font class=cc2>/</font>middle<font class=cc2>)</font>
color	 <font class=cc2>:</font> string				 <font class=cc2>:</font> color string <font class=cc5>for</font> the text
bgimg	 <font class=cc2>:</font> string				 <font class=cc2>:</font> url of the background image
bgcolor	 <font class=cc2>:</font> string				 <font class=cc2>:</font> color string
shadow	 <font class=cc2>:</font> <font class=cc7>{</font></font>
	<font class=cc6>"color"</font> <font class=cc3><font class=cc2>:</font> string<font class=cc2>,</font></font> <font class=cc6>"width"</font> <font class=cc3><font class=cc2>:</font> int
<font class=cc7>}</font>
 <font class=cc2>:</font> shadow parameters
border	 <font class=cc2>:</font> <font class=cc7>{</font></font>
	<font class=cc6>"color"</font> <font class=cc3><font class=cc2>:</font> string<font class=cc2>,</font></font> <font class=cc6>"width"</font> <font class=cc3><font class=cc2>:</font> int
<font class=cc7>}</font>
 <font class=cc2>:</font> border parameters
imgitem	 <font class=cc2>:</font> <font class=cc7>{</font></font>
	<font class=cc6>"src"</font> <font class=cc3><font class=cc2>:</font> string<font class=cc2>,</font></font>
	<font class=cc6>"width"</font> <font class=cc3><font class=cc2>:</font> int<font class=cc2>,</font></font> <font class=cc6>"height"</font> <font class=cc3><font class=cc2>:</font> int
<font class=cc7>}</font>
 <font class=cc2>:</font> bullet image <font class=cc5>for</font> non <font class=cc2>-</font> submenu <font class=cc2>(</font>bar<font class=cc2>)</font> or
plain <font class=cc2>(</font>tree<font class=cc2>)</font> items or default bullet <font class=cc5>for</font>
a menu item
imgdir	 <font class=cc2>:</font> <font class=cc7>{</font></font>
	<font class=cc6>"src"</font> <font class=cc3><font class=cc2>:</font> string<font class=cc2>,</font></font>
	<font class=cc6>"width"</font> <font class=cc3><font class=cc2>:</font> int<font class=cc2>,</font></font> <font class=cc6>"height"</font> <font class=cc3><font class=cc2>:</font> int
<font class=cc7>}</font>
 <font class=cc2>:</font> bullet image <font class=cc5>for</font> submenu items
imgdiropen <font class=cc2>:</font> <font class=cc7>{</font></font>
	<font class=cc6>"src"</font> <font class=cc3><font class=cc2>:</font> string<font class=cc2>,</font></font>
	<font class=cc6>"width"</font> <font class=cc3><font class=cc2>:</font> int<font class=cc2>,</font></font> <font class=cc6>"height"</font> <font class=cc3><font class=cc2>:</font> int
<font class=cc7>}</font>
 <font class=cc2>:</font> bullet image <font class=cc5>for</font> open submenu with items
imgendon <font class=cc2>:</font> <font class=cc7>{</font></font>
	<font class=cc6>"src"</font> <font class=cc3><font class=cc2>:</font> string<font class=cc2>,</font></font>
	<font class=cc6>"width"</font> <font class=cc3><font class=cc2>:</font> int<font class=cc2>,</font></font> <font class=cc6>"height"</font> <font class=cc3><font class=cc2>:</font> int
<font class=cc7>}</font>
 <font class=cc2>:</font> end item bullet when in</font> <font class=cc6>"on"</font> <font class=cc3>or</font> <font class=cc6>"opened"</font> <font class=cc3>state
imgendoff <font class=cc2>:</font> <font class=cc7>{</font></font>
	<font class=cc6>"src"</font> <font class=cc3><font class=cc2>:</font> string<font class=cc2>,</font></font>
	<font class=cc6>"width"</font> <font class=cc3><font class=cc2>:</font> int<font class=cc2>,</font></font> <font class=cc6>"height"</font> <font class=cc3><font class=cc2>:</font> int
<font class=cc7>}</font>
 <font class=cc2>:</font> end item bullet when in</font> <font class=cc6>"off"</font> <font class=cc3>or</font> <font class=cc6>"closed"</font> <font class=cc3>state
z	 <font class=cc2>:</font> int				 <font class=cc2>:</font> z <font class=cc2>-</font> index
opacity	 <font class=cc2>:</font> int				 <font class=cc2>:</font> opacity</font>
</pre>

<h1 class=cp10><font class=cf5>The Main Style Properties - Borders and Shadows, Itemover, Css, Scrollers and Backgrounds</font></h1>
<p class=cp10>CodeThatXPBar allows you to specify borders and shadows for your bars. For this purpose you should specify border/shadow like it shown at the example:</p>

<pre class=cc1>
<font class=cc6>"style"</font> <font class=cc2>:</font>
<font class=cc7>{</font>
	<font class=cc6>"border"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#003882"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>1</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"shadow"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"gray"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>2</font>
	<font class=cc7>}</font>
<font class=cc7>}</font>
</pre>

<p class=cp10>To customize style for items under mouse cursor you may use code like following:</p>

<pre class=cc1>
<font class=cc6>"itemover"</font> <font class=cc2>:</font> <font class=cc7>{</font>
	<font class=cc6>"css"</font> <font class=cc2>:</font> <font class=cc6>"test1"</font><font class=cc2>,</font> <font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>"#458EEE"</font><font class=cc2>,</font> <font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"middle"</font><font class=cc2>,</font>
	<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"white"</font>
<font class=cc7>}</font>
</pre>

<p class=cp10>You can use CSS to set certain properties for your bar:</p>

<pre class=cc1>
<font class=cc6>"style"</font>	 <font class=cc2>:</font> <font class=cc7>{</font>
	<font class=cc6>"css"</font> <font class=cc2>:</font> <font class=cc6>"test1"</font>
<font class=cc7>}</font>
</pre>

<p class=cp10>where "test1" is a name of css-style that can be described in a separate css-file or in the html file.</p>

<pre class=cc1>
<font class=cc3><font class=cc2>.</font>test1
<font class=cc7>{</font>
	FONT <font class=cc2>-</font> SIZE <font class=cc2>:</font> 8pt<font class=cc2>;</font>
	FONT <font class=cc2>-</font> FAMILY <font class=cc2>:</font> Verdana<font class=cc2>,</font> Arial<font class=cc2>;</font>
	TEXT <font class=cc2>-</font> ALIGN <font class=cc2>:</font> justify<font class=cc2>;</font>
	FONT <font class=cc2>-</font> WEIGHT <font class=cc2>:</font> bolder<font class=cc2>;</font>
	MARGIN <font class=cc2>-</font> LEFT <font class=cc2>:</font> 5px<font class=cc2>;</font>
	MARGIN <font class=cc2>-</font> RIGHT <font class=cc2>:</font> 5px
<font class=cc7>}</font></font>
</pre>

<p class=cp10>You may want to cancel border/shadow that was defined for bar at whole, for a certain menu item or submenu.</p>

<pre class=cc1>
<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
	<font class=cc6>"border"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
	<font class=cc6>"shadow"</font> <font class=cc2>:</font> <font class=cc6>""</font>
<font class=cc7>}</font>
</pre>

<p class=cp10>You have a posibility to determine scrollers for your XPBar. For example:</p>

<pre class=cc1>
<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
	<font class=cc2>...</font>
<font class=cc7>}</font><font class=cc2>,</font>
<font class=cc6>"scroller"</font> <font class=cc2>:</font> <font class=cc7>{</font>
	<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc2>...</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"styleover"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc2>...</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"up"</font> <font class=cc3><font class=cc2>:</font> url<font class=cc2>,</font></font> <font class=cc6>"down"</font> <font class=cc3><font class=cc2>:</font> url<font class=cc2>,</font></font>
	<font class=cc6>"height"</font> <font class=cc3><font class=cc2>:</font> int<font class=cc2>,</font></font> 		//scroller's height
	<font class=cc6>"step"</font> <font class=cc3><font class=cc2>:</font> int<font class=cc2>,</font></font> 		//step to scroll by
	<font class=cc6>"time"</font> <font class=cc3><font class=cc2>:</font> int<font class=cc2>,</font></font> 		//pause in milliseconds
	<font class=cc6>"len"</font> <font class=cc3><font class=cc2>:</font> int<font class=cc2>,</font></font> //length in pixels to scroll
	<font class=cc6>"offset"</font> <font class=cc2>:</font> int //if scroller size smaller
	//that bar size set margin from the left side
<font class=cc7>}</font>
 <font class=cc2>:</font> describes the scrollers set
</pre>

<p class=cp10>You can use various colors for items' background and even specify background image.</p>

<pre class=cc1>
<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
	<font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>"#669002"</font>
<font class=cc7>}</font>
<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
	<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>"img/grass.gif"</font>
<font class=cc7>}</font>
</pre>

<h2 class=cp10><font class=cf4>Example - The main style properties</font></h2>
<p class=cp10>You can see an example and complete code here - <a class=ca5 href="style_ex.html" onclick="return openWin(800,550,'style_ex.html')" target=_blank>The main style properties Example</a></p>
<h1 class=cp10><font class=cf5>Bullet Images</font></h1>
<p class=cp10>With CodeThatXPBar you can specify various bullet images for the items:</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7>bullet image for non-submenu (bar) or plain (tree) items or default bullet for a menu item</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7>bullet image for submenu items</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7>bullet image for open submenu with items</p>
<p class=cp10>end item bullet when in "on" or "opened" state</p>

<pre class=cc1>
<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
	<font class=cc6>"imgitem"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/bul.gif"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>16</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>16</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"imgdir"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/dir.gif"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>16</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>16</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"imgendon"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/arr_down.gif"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>16</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>16</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"imgendoff"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/arr_right.gif"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>16</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>16</font>
	<font class=cc7>}</font>
<font class=cc7>}</font>
</pre>

<h2 class=cp10><font class=cf4>Example - Bullet Images</font></h2>
<p class=cp10>You can see an example and complete code here - <a class=ca5 href="img_ex.html" onclick="return openWin(800,550,'img_ex.html')" target=_blank>Bullet Images Example</a></p>
<h1 class=cp10><font class=cf5>Opacity</font></h1>
<p class=cp10>You can define an items opacity (IE 5+):</p>

<pre class=cc1>
<font class=cc6>"style"</font> <font class=cc2>:</font>
<font class=cc7>{</font>
	<font class=cc6>"opacity"</font> <font class=cc2>:</font> <font class=cc4>50</font>
<font class=cc7>}</font>
</pre>

<h2 class=cp10><font class=cf4>Example - Opacity</font></h2>
<p class=cp10>You can see an example and complete code here - <a class=ca5 href="opacity_ex.html" onclick="return openWin(800,550,'opacity_ex.html')" target=_blank>Opacity Example</a></p>
<p class=cp10><a class=ca7 href="bar_pos.html">Read more about CodeThatXPBar&nbsp;&gt;&gt;</a></p>

</td>
</tr>
<tr>
<td><p class=cp8>&copy; <a class=ca2 href="">CodeThat.com</a>, 2003-2005<br>
Design by <a class=ca2 href="http://www.xt-labs.com">XTLabs, Inc</a>.</p></td>
</tr>
</table></body></html>